//index.js
import wxRequest from '../../utils/wxRequest.js'
var util = require("../../utils/util.js");
//获取应用实例
const app = getApp()
Page({
  data: {
    userInfo: {},
    token: null,
    imagePath: "", //存储图片路径
    rpx: '', //屏幕宽度比较值
    title: '2019年你将实现的五件事', //标题
    ercode: "/images/ercode.jpg", //小程序二维码
    lists: [], //内容列表
    canvas_hide: true,
    avatar: ''
  },
  onLoad: function(options) {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          width: res.windowWidth,
          height: res.windowHeight,
          rpx: res.windowWidth / 375
        });
      },
    });
    that.initUserInfo(() => {
      that.getEvents();
      that.createNewImg();
    });
  },
  getEvents() {
    var that = this;
    wxRequest.getRequest('/future/event/determine').then(res => {
      that.setData({
        lists: res.data
      })
    }).catch(error => {

    })
  },
  initUserInfo(cb) {
    var that = this;
    let userInfo = wx.getStorageSync('userInfo')
    let token = wx.getStorageSync('t')
    if (token) {
      app.globalData.userInfo = userInfo;
      that.setData({
        userInfo: app.globalData.userInfo,
        token: wx.getStorageSync('t'),
        lists: wx.getStorageSync('lists') ? wx.getStorageSync('lists') : app.globalData.lists
      })
      cb && cb()
    } else {
      // 防止getUserInfo 在 Page.onLoad 之后返回以这种情况
      app.userInfoReadyCallback = res => {
        // console.log('userInfoReadyCallback', res)
        that.setData({
          userInfo: res.userInfo,
          token: wx.getStorageSync('t'),
          lists: wx.getStorageSync('lists') ? wx.getStorageSync('lists') : app.globalData.lists
        })
        cb && cb()
      }
    }
  },
  bindGetUserInfo: function(e) {
    wxRequest.bindGetUserInfo(e);
  },

  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg: function() {
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    var path = "/images/bg.png";
    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
    context.drawImage(path, 0, 0, that.data.width, that.data.height);

    // 绘制标题
    var title = that.data.title;
    context.setFontSize(18);
    context.setFillStyle("#fff");
    context.fillText(title, 98 * that.data.rpx, 45 * that.data.rpx);

    // 绘制提示
    var tip1 = '点击保存二维码';
    context.setFontSize(14);
    context.setFillStyle("#fff");
    context.fillText(tip1, 40 * that.data.rpx, 539 * that.data.rpx);
    var tip2 = '2019年你可能会发生的事';
    context.setFontSize(14);
    context.setFillStyle("#fff");
    context.fillText(tip2, 40 * that.data.rpx, 565 * that.data.rpx);

    //用户名绘制到canvas的固定
    var name = that.data.userInfo.nickName;
    context.setFontSize(14);
    context.setFillStyle("#fff");
    context.fillText(name, 155 * that.data.rpx, 170 * that.data.rpx);
    //  二维码
    var erpath = that.data.ercode;
    context.drawImage(erpath, 240 * that.data.rpx, 510 * that.data.rpx, 80, 80);

    //绘制内容列表
    var x = 10, y = 210, w = 350 * that.data.rpx, h = 260 * that.data.rpx,r=10;

    // 左上角
    context.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
    // border-top
    context.moveTo(x + r, y);
    context.lineTo(x + w - r, y);
    context.lineTo(x + w, y + r);
    // 右上角
    context.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
    // border-right
    context.lineTo(x + w, y + h - r);
    context.lineTo(x + w - r, y + h);
    // 右下角
    context.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
    // border-bottom
    context.lineTo(x + r, y + h);
    context.lineTo(x, y + h - r);
    // 左下角
    context.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
    // border-left
    context.lineTo(x, y + r);
    context.lineTo(x + r, y);

    // 剪切
    // context.clip();
    context.setStrokeStyle("transparent");
    context.setFillStyle('#FCEBC4');
    

    //绘制头像
    var r = 40;
    var d = 2 * r;
    var cx = 180 * that.data.rpx;
    var cy = 105 * that.data.rpx;
    context.arc(cx, cy, r, 0, 2 * Math.PI);
    context.clip();
    context.setStrokeStyle("transparent");
    wx.getImageInfo({
      src: wx.getStorageSync('userInfo').avatarUrl,
      success: function(res) {
        context.drawImage(res.path, cx - r, cy - r, d, d);
        context.fillRect(x, y, w, h);
        //内容绘制到canvas
        var list = wx.getStorageSync('lists');
        for (let i in list) {
          context.setFontSize(18);
          context.setFillStyle("#ff6700");
          context.fillText((Number(i) + 1) + '.' + list[i], 30 * that.data.rpx, 253 + 46 * i * that.data.rpx);
          var path = "/images/yes.png";
          context.setLineWidth(4);
        }
        context.save();
        context.restore();
        context.stroke();
         context.draw(true, setTimeout(function () {
          wx.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success: function (res) {
              var tempFilePath = res.tempFilePath;
              that.setData({
                imagePath: tempFilePath,
                canvas_hide: true
              });
            },
            fail: function (res) {
              console.log(res);
            }
          });
        }, 600));
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
      }
    })
    // context.draw();
  
  

  },
  //点击图片进行预览，长按保存分享图片
  previewImg: function(e) {
    var img = this.data.imagePath
    wx.previewImage({
      current: img, // 当前显示图片的http链接
      urls: [img] // 需要预览的图片http链接列表
    })
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
    var that = this
    that.initUserInfo(() => {
      that.getEvents();
      that.createNewImg();
    });
    wx.showToast({
      title: '刷新成功',
      duration: 1000
    })
    wx.setBackgroundTextStyle({
      textStyle: 'dark', // 下拉背景字体、loading 图的样式为dark
    })
    // 隐藏导航栏加载框  
    wx.hideNavigationBarLoading();
    // 停止下拉动作  
    wx.stopPullDownRefresh();
  },
  onShow() {
    var that = this;
    that.initUserInfo(() => {
      that.getEvents();
      that.createNewImg();
    });
  },

})